<template>
  <view class="container">
    <!-- <uni-nav-bar
      :border="false"
      shadow
      statusBar
      title="消息通知"
      color="#1F1F1F"
      left-icon="left"
      leftWidth="60rpx"
      @clickLeft="onBack"
    >
    </uni-nav-bar> -->
    <float-button name="message" />

    <view class="listBox">
      <swiper
        class="swiper-box"
        :duration="300"
        :current="current"
        @change="onTabchange"
        @transition="enabled = false"
        @animationfinish="enabled = true"
      >
        <swiper-item class="swiper-item">
          <list-scroll-view
            :ref="'scrollView0'"
            :api="getMsgList"
            height="90vh"
            :init="{}"
            :refresherEnabled="enabled"
          >
            <template v-slot:list="{ data }">
              <view class="box">
                <view
                  class="item"
                  v-for="(item, i) in data"
                  :key="i"
                  @click="onClick(item)"
                >
                  <view class="t">
                    <view class="title"
                      ><view class="point" v-if="item.readFlag == 0" />{{
                        item?.noticeTitle
                      }}</view
                    >
                    <view class="content">{{ item.message }}</view>
                  </view>
                  <view class="b">
                    <view class="name">时间</view>
                    <view class="value">{{ item?.createTime }}</view>
                  </view>
                </view>
              </view>
            </template>
            <template #empty>
              <view class="uni-nodata">暂无数据!</view>
            </template>
          </list-scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import _ from 'lodash';
import { getMsgList, netMsgRead } from '@/api/notice';
import ListScrollView from '@/components/ListScrollView/index.vue';
export default {
  components: {
    ListScrollView,
  },
  data() {
    return {
      queryData: {},
      // api
      getMsgList,
      // swiper
      current: 0,
      enabled: true,
      data: ['列表'],
    };
  },
  onLoad(query) {},
  onShow() {
    this.$nextTick(() => {
      for (let i = 0; i < this.data.length; i++) {
        this.$refs[`scrollView${i}`].getData(true);
      }
    });
  },
  methods: {
    onAllRead() {
      this.$refs[`scrollView0`].searchData();
    },
    // 点击
    onClick(item) {
      // url参数
      // let obj = {
      //     id: item.noticeId,
      // }
      // let str = this.$util.jsonToUrlParam(obj);
      // this.onLocation(`/pages/notice/detail?${str}`)
      netMsgRead({
        messageId: item.messageId,
      }).then((res) => {
        if (res.code === 200) {
          item.readFlag = 1;
        }
      });
    },
    // swiper
    onTabchange(e) {
      let index = e.target.current || e.detail.current;
      this.current = index;
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-top));
  background: #f2f2f2;
  position: relative;
  display: flex;
  flex-direction: column;
  .listBox {
    flex: 1 1 auto;
    position: relative;
    .swiper-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    .box {
      margin: 36rpx;
    }
    .item {
      line-height: 1;
      margin-bottom: 30rpx;
      background: #ffffff;
      border-radius: 20rpx;
      box-shadow: 0rpx 4rpx 17rpx 0rpx rgba(0, 0, 0, 0.06);
      letter-spacing: 4rpx;
      position: relative;
      &:last-child {
        margin-bottom: 0;
      }
      .t {
        padding: 24rpx 34rpx 16rpx;
        border-bottom: 2rpx solid #ebebeb;
        .title {
          font-size: 32rpx;
          font-weight: 600;
          padding-bottom: 20rpx;
          display: flex;
          align-items: center;
          .point {
            width: 16rpx;
            height: 16rpx;
            margin-right: 10rpx;
            background: #f56c6c;
            border-radius: 50%;
          }
        }
        .content {
          font-size: 32rpx;
          color: #505050;
          line-height: 38rpx;
          text-align: justify;
        }
      }
      .b {
        padding: 26rpx 34rpx 32rpx;
        display: flex;
        align-items: center;
        .name {
          font-size: 28rpx;
          color: #989898;
          line-height: 33rpx;
          margin-right: 10rpx;
        }
        .value {
          font-size: 28rpx;
          color: #505050;
          line-height: 33rpx;
        }
      }
    }
  }
}
</style>
